<template>
  <div class="config">
    <a-form ref="ruleForm" :model="form" :rules="rules">
      <div class="background" v-if="editMode">
        <a-form-item ref="name" label="文章标题" name="title">
          <a-input v-model:value="form.title" placeholder="请输入文章标题" />
        </a-form-item>
      </div>
      <a-divider orientation="left"> 渠道配置</a-divider>
      <!-- 每个渠道自定义配置 star-->
      <div class="background">
        <a-form-item label="个人分类:" name="category">
          <a-select
            v-model:value="form.category"
            style="width: 100%"
            mode="tags"
            placeholder="请选择个人分类"
          >
            <a-select-option
              v-for="item in category"
              mode="tags"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="文章类型:" name="publishType">
          <a-radio-group v-model:value="form.publishType">
            <a-radio value="00">发布至首页候选区</a-radio>
            <a-radio value="01">发布至博客园首页</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="系统分类:" name="siteCategory">
          <a-select
            v-model:value="form.siteCategory"
            style="width: 100%"
            placeholder="请选择系统分类"
          >
            <a-select-option v-for="item in siteCategory" :key="item.value">
              {{ item.key }}
            </a-select-option>
          </a-select>
          <!-- <a-input v-model:value="article.tags" placeholder="文章标签" /> -->
        </a-form-item>
        <a-form-item label="高级选项:">
          <a-checkbox v-model:checked="form.ckbPublished"> 发布 </a-checkbox>
          <a-checkbox v-model:checked="form.chkDisplayHomePage">
            显示在我的博客首页
          </a-checkbox>
          <a-checkbox v-model:checked="form.chkComments"> 允许评论 </a-checkbox>
          <a-checkbox v-model:checked="form.chkMainSyndication">
            显示在RSS中
          </a-checkbox>
          <a-checkbox v-model:checked="form.chkIsOnlyForRegisterUser">
            只允许注册用户访问
          </a-checkbox>
        </a-form-item>
        <a-form-item label="摘要">
          <a-textarea
            v-model:value="form.txbExcerpt"
            placeholder="请输入文章摘要"
            :rows="4"
          ></a-textarea>
        </a-form-item>
        <a-form-item label="文章标签">
          <a-select
            v-model:value="form.tags"
            mode="tags"
            style="width: 100%"
            placeholder="请选择文章标签"
          >
            <a-select-option v-for="item in tags" :key="item.value">
              {{ item.key }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </div>
      <!-- 渠道自定义配置  end-->
      <div class="background" v-if="editMode">
        <a-form-item label="文章内容" name="content">
          <v-md-editor v-model="form.content" height="400px"></v-md-editor>
        </a-form-item>
      </div>
      <div class="save">
        <div>
          <a-button style="width: 100px; margin-right: 10px">取消</a-button>
          <a-button
            html-type="submit"
            @click="submit"
            style="width: 100px"
            type="primary"
            >保存</a-button
          >
        </div>
      </div>
    </a-form>
  </div>
</template>
<script>
export default {
  name: "Cnblogs",
  props: {
    //渠道名称
    channel: {
      type: String,
      default: "",
    },
    //模式：编辑模式 true 默认配置模式 false
    editMode: {
      type: Boolean,
      default: true,
    },
    //文章信息
    article: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 默认配置
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        title: "",
        content: "",
        // 每个渠道各自的配置
        tags: [],
        chkComments: false,
        chkDisplayHomePage: false,
        ckbPublished: false,
        chkIsOnlyForRegisterUser: false,
        chkMainSyndication: false,
        category: [],
        siteCategory: "前端",
        publishType: "00",
        txbExcerpt: "",
        txbTag: "",
      },
      category: [],
      tags: [],
      siteCategory: [],
      rules: {
        title: { required: true, message: "文章标题不能为空", trigger: "blur" },
        publishType: {
          required: true,
          message: "发布选项不能为空",
          trigger: "blur",
        },
        siteCategory: {
          required: true,
          message: "系统分类不能为空",
          trigger: "blur",
        },
        content: {
          required: true,
          message: "文章内容不能为空",
          trigger: "blur",
        },
      },
    };
  },
  methods: {
    // 提交，
    submit() {
      this.$refs["ruleForm"]
        .validate()
        .then(() => {
          let form = {
            channel: this.channel,
            article: {},
            config: {},
          };
          this.form.txbTag = this.form.tags.toString();
          for (let i in this.form) {
            if (i == "title" || i == "content") {
              form["article"][i] = this.form[i];
            } else {
              form["config"][i] = this.form[i];
            }
          }
          this.$emit("submit", form);
        })
        .catch((error) => {
          console.log("error", error);
        });
    },
    // 获取用户真实的配置
    getUserConfig() {
      window.chrome.runtime.sendMessage(
        window.CHROME_ID,
        {
          func: `ChannelService.${this.channel}.getConfig`,
          args: {},
          js: localStorage.getItem("operation"),
        },
        (t) => {
          // this.category=t.data.myCategory
          console.log(t);
          //添加到选择框选项中
        }
      );
    },
  },
  watch: {
    // 获取用户文章信息，会覆盖部分配置
    article: {
      handler(newVal) {
        console.log("文章数据",newVal);
        if (this.editMode) {
          setTimeout(() => {
            this.form.title = newVal.title;
            this.form.content = newVal.content;

          }, 200);
        }
      },
      deep: true,
      immediate: true,
    },
    //获取用户默认配置
    config: {
      handler(newVal) {
        console.log('配置更新',newVal);
        const config = newVal.config;
        for (let i in config) {
          this.form[i] = config[i];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getUserConfig();
  },
};
</script>
<style lang="stylus" scoped>
.config {
  .background {
    padding: 20px;
    background: #fafafa;
    margin-bottom: 10px;
  }

  .save {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 60px;
    width: 100%;
    background: #fff;
  }
}
</style>